<!--
 * @Author: giteezr 2250368646@qq.com
 * @Date: 2023-12-22 09:37:08
 * @LastEditors: giteezr 2250368646@qq.com
 * @LastEditTime: 2023-12-27 22:04:22
 * @FilePath: \vue3+nodeJs\houtaiguanli\management-system\src\views\bus\securitySituation\centerTop\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="map"></div>
</template>

<script setup>
import mapboxgl from "mapbox-gl";
import MapboxLanguage from "@mapbox/mapbox-gl-language";
import { onMounted } from "vue";
mapboxgl.accessToken =
  "pk.eyJ1IjoibHVrYXNtYXJ0aW5lbGxpIiwiYSI6ImNpem85dmhwazAyajIyd284dGxhN2VxYnYifQ.HQCmyhEXZUTz3S98FMrVAQ";
// mapboxgl.setRTLTextPlugin(
//   "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js"
// );
//在组件挂载后初始化地图
onMounted(() => {
  loadMap();
});
function loadMap() {
  const map = new mapboxgl.Map({
    container: "map", // container ID
    // mapbox://styles/mapbox/navigation-night-v1 导航底图(晚上)
    // mapbox://styles/mapbox/satellite-streets-v12 卫星街道混合底图
    // mapbox://styles/mapbox/streets-v12 Streets街道底图
    // mapbox://styles/mapbox/dark-v11
    style: "mapbox://styles/mapbox/navigation-night-v1",
    center: [118.784545, 32.053279],
    zoom: 9,
    // pitch: 60, //视野倾斜，0-60projection: "globe",
    // bearing: -17.6, //视野旋转角度
    showZoomControl: false, //不显示mapbox控制工具
    projection: "globe", //显示地球
  });
}
</script>

<style  lang="less" scoped>
#map {
  width: 100%;
  height: 100%;
  /deep/ .mapboxgl-ctrl-attrib {
    display: none;
  }
}
</style>
